<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./放大镜样式.css">
</head>

<body>
    <div class="box">
        <div class="main">
            <img src="./蔡徐坤.webp">
            <div class="mask">

            </div>
        </div>
        <div class="small">
            <ul>
                <li><img src="./LenovoWallPaper.jpg"></li>
                <li><img src="./blue.jpg"></li>
                <li><img src="./red.jpg"></li>
                <li><img src="./white.jpg"></li>
                <li><img src="./吴亦凡.webp"></li>
            </ul>
        </div>
        <div class="big">

        </div>
    </div>
</body>

</html>
<script>
    var imgs = document.querySelectorAll('.small img')
    var mimg = document.querySelector('.main img')
    var main = document.querySelector('.main')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    for (i = 0; i < imgs.length; i++) {
        imgs[i].onmouseover = function () {
            this.style.border = '2px solid red'
            mimg.src = this.src
        }
        imgs[i].onmouseout = function () {
            this.style.border = ''
        }
    }
    main.onmouseenter = function () {
        mask.style.display = 'block'
        big.style.display = 'block'
    }
    main.onmouseleave = function () {
        mask.style.display = 'none'
        big.style.display = 'none'
    }
    mimg.onmousemove = function (e) {
        mask.style.display = 'block'
        var a = e.pageX - 100
        var b = e.pageY - 100
        //设置最小值
        a = a < 0 ? 0 : a
        b = b < 0 ? 0 : b
        //设置最大值
        a = a > 200 ? 200 : a
        b = b > 200 ? 200 : b
        mask.style.left = a + 'px'
        mask.style.top = b + 'px'
        big.style.backgroundImage = `url(${this.src})`
        big.style.backgroundPosition = `${-2 * a}px ${-2 * b}px`
        
    }
</script>